<template>
    <div>
        <div class="ht"></div>
        <el-steps
            v-if="active!=0&&active!=5"
            style="max-width: 600px;margin-top: 20px;"
            :space="200"
            :active="active"
            finish-status="success"
        >
            <div style="font-size: 20px;">申报流程：</div>
            <el-step title="待申报" />
            <el-step title="待审批" />
            <el-step title="已审批" />
            <el-step title="已发布" />
        </el-steps>
        <div v-else-if="active==0">
            <el-col :sm="12" :lg="6">
                <el-result
                    icon="error"
                    title="该方案已废弃"
                    :sub-title=comments
                >
                    <!-- <template #extra>
                    <el-button type="primary">Back</el-button>
                    </template> -->
                </el-result>
            </el-col>
        </div>
        <div v-else-if="active==5">
            <el-col :sm="12" :lg="6">
                <el-result
                    icon="info"
                    title="该方案已驳回"
                    :sub-title=comments
                >
                    <!-- <template #extra>
                    <el-button type="primary">Back</el-button>
                    </template> -->
                </el-result>
            </el-col>
        </div>
        
        <el-row style="margin-top: 20px;">
            <el-col :span="3" :offset="3">
                <el-button type="info" @click="fanhui">返回</el-button>
            </el-col>
            <el-col :span="3" v-if="active==2">
                <el-button type="danger" @click="open('废弃后方案作废，确定要废弃申报吗','废弃',0)">废弃</el-button>
            </el-col>
            <el-col :span="3" v-if="active==2">
                <el-button type="warning" @click="open('驳回后方案需重新编辑,确定要驳回申报吗','驳回',5)">驳回</el-button>
            </el-col>
            <el-col :span="3" v-if="active==2">
                <el-button type="success" @click="open('是否批准该方案','批准',3)">批准</el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { updateAnctByState } from '@/api/announcemt';
import { selectAnctOne } from '@/api/announcemt';
import router from '@/router';
import { ref,onMounted } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const active=ref(null);
const comments=ref(null);
const id = route.query.id;
const fanhui=(()=>{
    window.history.back();
})
const select=(async()=>{
    const response= await selectAnctOne(id)
    const re= response.data.data
    document.querySelector('.ht').innerHTML = "<p><h1 style='font-size: 40px;display: flex;justify-content: center;'>"+re.title+"</h1></p>"
    +"<p style='margin: 10px;font-size: 20px;display: flex;justify-content: space-around;'><span>发布时间："+re.publishDate+"</span><span>发布单位："+re.publishUnitName+"</span></p>"
    +re.main
    +"<p style='font-size: 20px; margin-top: 10px;'><span>生效时间："+re.effectiveDate+"</span></p>";
    active.value=re.approval
    comments.value=re.comments
})
const open = (value1,value2,num) => {
    if(num==3){    
        ElMessageBox.confirm(value1,value2,{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            }
        )
        .then(() => {
            if(updateAnctByState(id,num))
            ElMessage({
                type: 'success',
                message: value2+'成功',
            })
            setTimeout(router.go(0),500)
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
    }else{
        ElMessageBox.prompt(value1, value2, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        })
        .then((value) => {
            if(updateAnctByState(id,num,value.value))
            ElMessage({
                type: 'success',
                message: value2+'成功',
            })
            setTimeout(router.go(0),500)        
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
    }
}
onMounted(()=>{
    select()
})
</script>

<style lang="scss" scoped>

</style>